﻿@page "/app/word/details"
@page "/app/word/details/{Id}"
@using BluePig.Pages.App.ECommerce.Shop
@using BluePig.Pages.App.English.Word.ViewModel
@using BluePig.OpenAPIs
@using Blazored.Video
@using Blazored.Video.Support
@using Microsoft.JSInterop
@inherits ProCompontentBase
@inject IJSRuntime JS
<MCard>
    <MCardText>
        <MRow style="min-height:580px;">
            <MCol Md="7" Align="AlignTypes.Center">
                <div id="videoParent">
                    <BlazoredVideo id="video" Play="OnPlay"
                                   style="width: 95%; min-height: 400px; display: flex;"
                                   controls="controls">
                        <source src="@word.Mp4Url" type="video/mp4"/>
                    </BlazoredVideo>
                </div>
               
                <h3 class="neutral-lighten-1--text" style="margin-top: 10px;">@word.En</h3>
                <p class="mb-6 text-body3 justify-text-align" style="white-space: pre-line;">
                    @word.Cn
                </p>
            </MCol>
            <MCol Md="5" class="d-flex flex-column pa-12 pl-0">
               
                <p class="mb-6 text-body3 justify-text-align" style="white-space: pre-line; max-height: 450px;overflow: scroll;">
                    @word.Lines
                </p>
               
                <MDivider></MDivider>
                <div class="mb-6 mt-6 d-flex justify-space-between">
                    <div class="d-flex align-center">
                        <MButton MinWidth=100 Depressed Outlined class="primary--text rounded-pill">
                            收藏
                        </MButton>
                        <MButton MinWidth=100 Depressed class="primary ml-6 mr-6 rounded-pill" @onclick=Next>
                            下一个
                        </MButton>
                        
                    </div>
                </div>
                
            </MCol>
        </MRow>
        
    </MCardText>
</MCard>

@code{

    private BluePig.Word word;
    private List<BluePig.Word> words;
    [Parameter]
    public string Id { get; set; }
    [Inject]
    public BluePigHttpClient? bluePigHttpClient { get; set; }
    [Inject]
    public NavigationManager Nav { get; set; } = default!;
    protected  override void OnInitialized()
    {
        word = bluePigHttpClient.GetBluePigService().Words2Async(int.Parse(Id)).Result;
        words = bluePigHttpClient.GetBluePigService().WordsAllAsync().Result.ToList();
    }
    private void OnPlay(VideoState obj)
    {
        //throw new NotImplementedException();
    }

    private async Task Next()
    {
        
        var random = new Random();
        word = words[random.Next(0, words.Count)];
        Nav.NavigateTo($"/app/word/details/{word.Id}");
        await JS.InvokeVoidAsync("displayTickerAlert1", word.Mp4Url,word.LineUrl);
    }

}
